<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["monitoringTimeX", "monitoringTimeY"],

  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    monitoringTimeY: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;
          // console.log("拌合时长y",this.allData);
          setTimeout(() => {
            this.initChart();
            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
          }, 100);
        }
      },
      immediate: true,
    },
    monitoringTimeX: {
      handler(newVal) {
        if (newVal) {
          this.xDatas = newVal;
        }
      },
      immediate: true,
    },
  },

  mounted() {
    // setTimeout(() => {
    //   this.initChart();
    //   window.addEventListener("resize", this.screenAdapter);
    //   // 在页面加载完成的时候, 主动进行屏幕的适配
    //   this.screenAdapter();
    // }, 100);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      // var dataY = [20, 50, 80, 58, 83, 68, 57, 80, 42, 66, 75, 88];
      var dataY = this.allData;
      // var dataX = [
      //   "1月",
      //   "2月",
      //   "3月",
      //   "4月",
      //   "5月",
      //   "6月",
      //   "7月",
      //   "8月",
      //   "9月",
      //   "10月",
      //   "11月",
      //   "12月",
      // ];
      var dataX = this.xDatas;

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["拌合时间（ S )", "超标数量"],
          textStyle: {
            color: "rgba(23, 26, 29, 1)",
            // fontSize: 14
          },
          // itemWidth: 15,
          // itemHeight: 15,
          // itemGap: 35
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: dataX,

            axisLine: {
              lineStyle: {
                color: "rgba(126, 134, 142, 0.5)",
                width: 0.8,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(23, 26, 29, 1)",
                // fontSize:14
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                width: 0.8,
                type: "solid",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(23, 26, 29, 1)",
                // fontSize:14
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                type: "dotted",
              },
            },
          },
        ],
        series: [
          {
            name: "拌合时间（ S )",
            type: "bar",
            data: dataY,
            // barWidth: 20, //柱子宽度
            barGap: 0.3, //柱子之间间距
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(116, 178, 252, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(116, 178, 252, 0.20)",
                    },
                  ],
                },
              },
            },
          },
          //   {
          //     name: "超标数量",
          //     type: "bar",
          //     data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46, 65, 74],

          //     barGap: 0.3,
          //     itemStyle: {
          //       normal: {
          //         color: {
          //           type: "linear",
          //           x: 0,
          //           y: 0,
          //           x2: 0,
          //           y2: 1,
          //           colorStops: [
          //             {
          //               offset: 0,
          //               color: "rgba(254, 153, 122, 1)",
          //             },
          //             {
          //               offset: 1,
          //               color: "rgba(254, 153, 122, 0.20)",
          //             },
          //           ],
          //         },
          //       },
          //     },
          //   },
        ],
      };
      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          itemWidth: titleFontSize * 1.2876,
          itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          {
            barWidth: titleFontSize * 1.717, //柱子宽
          },
          // {
          //   barWidth: titleFontSize * 1.717, //柱子宽度
          // },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
